<template>
  <up-navbar title="订单" bgColor="#fff" @leftClick="back()">
    <template #right>
      <view @click="changeOrder" class="u-f-sx">{{ orderParams.showOrder ? '商城' : '厨房' }}</view>
    </template>
  </up-navbar>
  <view class="page-container">
    <!-- 固定在顶部的 tabs -->
    <view class="fixed-tabs">
      <up-tabs
          :current="orderParams.currentOrder"
          :list="orderTab"
          @click="handleTabClick"
          :scrollable="true"
          lineColor="#2979ff"
          activeColor="#2979ff"
          inactiveColor="#666"
          :itemStyle="{padding: '0 30rpx',height: '80rpx',lineHeight: '80rpx'}"
      ></up-tabs>
    </view>

    <!-- 内容区域（减去 tabs 高度） -->
    <view class="content-container">
      <swiper
          class="swiper"
          :current="orderParams.currentOrder"
          @change="handleSwiperChange"
          circular
          :duration="300"
      >
        <swiper-item v-for="(tab, index) in orderTab" :key="index">
          <a-scroll-view @loadMore="console.log('加载了')">
            <view class="content-item" v-for="i in 10" :key="i">
              <order-item></order-item>
            </view>
          </a-scroll-view>
        </swiper-item>
      </swiper>
    </view>
  </view>
</template>

<script setup>
import {ref} from 'vue';
import {useOrderParamsStore} from "@/store/order";
import {storeToRefs} from 'pinia'
import {back, toPath} from "@/util/router/router";
import {orderTab} from "@/util/options/system";
import OrderItem from "@/order/components/order-item.vue";


const orderStore = useOrderParamsStore()
const {orderParams} = storeToRefs(orderStore) // 只解构响应式状态

const handleTabClick = (tab) => {
  orderStore.updateOrderParams({currentOrder: tab.index})
}

const handleSwiperChange = (e) => {
  orderStore.updateOrderParams({currentOrder: e.detail.current})
}

const changeOrder = () => {
  console.log(orderParams.value.showOrder)
  orderStore.updateOrderParams({showOrder: !orderParams.value.showOrder})
}
</script>

<style scoped lang="scss">
@import "@/static/css/index.css";

.page-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.fixed-tabs {
  position: sticky;
  // #ifdef H5
  top: 44px;
  // #endif
  // #ifdef MP-WEIXIN || APP
  top: 130rpx;
  // #endif
  z-index: 1000;
  background-color: #fff;
  /* 添加阴影效果，增强视觉分离 */
}

.content-container {
  background: #f1f1f1;
  flex: 1;
  height: calc(100% - 80rpx); /* 重要：确保高度计算正确 */
}

.swiper {
  height: 100%;
}

.scroll-content {
  height: 100%;
  box-sizing: border-box;
}


</style>